/*
 *
 * (c) Copyright Ascensio System Limited 2010-2018
 *
 * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU 
 * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html). 
 * In accordance with Section 7(a) of the GNU GPL its Section 15 shall be amended to the effect that 
 * Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
 *
 * THIS PROGRAM IS DISTRIBUTED WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE. For more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
 *
 * You can contact Ascensio System SIA by email at sales@onlyoffice.com
 *
 * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display 
 * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
 *
 * Pursuant to Section 7 § 3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains 
 * relevant author attributions when distributing the software. If the display of the logo in its graphic 
 * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE" 
 * in every copy of the program you distribute. 
 * Pursuant to Section 7 § 3(e) we decline to grant you any rights under trademark law for use of our trademarks.
 *
*/


@actionListWidth:           64px;
@divHeight:                 40px;

/************* tasks **************/

#CommonListContainer {
    .taskProcess {
        height: inherit;
        width: 16px;
        background-position: 0 10px;
    }


    .taskList {
        .task {
            border-bottom: #d1d1d1 1px solid;
            height: @divHeight;
            clear: both;

            .checkbox {
                cursor: pointer;
                margin-right: 4px;
                padding: 10px 0 0 4px;
                width: 20px;
                height: 20px;
                float: left;

                input {
                    margin: 4px;
                }
            }

            .check {
                float: left;
                width: @actionListWidth;
                height: @divHeight;


                &.priority0 {
                    background: #f4f4f4;
                }

                &.priority-1 {
                    background: #c3c3c3;
                }

                &.priority1 {
                    background: #E46850;
                }

                input {
                    display: inline-block;
                    margin: 8px auto;
                }
            }

            .taskPlace {
                float: left;
                height: @divHeight;
            }

            .taskName {
                float: left;
                overflow: hidden;
                white-space: nowrap;
                height: @divHeight;
                line-height: @divHeight;
                text-overflow: ellipsis;
                max-width: 840px;
            }

            .high_priority {
                background: url("../../../../../skins/default/images/svg/projects/important.svg") no-repeat;
                display: inline-block;
                float: left;
                height: 15px;
                margin-right: 4px;
                margin-top: 11px;
                width: 14px;
                background-position-x: 100%;
                background-position-y: 1px;
            }

            span.timeLeft {
                color: #333333;
                font-size: 12px;
                line-height: @divHeight;
                cursor: default;
                float:right;
                margin-right:12px;

                &.red {
                    color: #cc3300;
                }
            }

            span.milestone {
                width: 16px;
                height:16px;
                background: url("../../../../../skins/default/images/svg/projects/milstones.svg") no-repeat;
                float:right;
                margin-top:12px;
                background-position: 50%;
            }

            .deadline {
                overflow: hidden;
                white-space: nowrap;
                height: @divHeight;
                text-align: center;
                float: right;
                display: block;
                width: 118px;
            }

            .subtasksCount {
                float: left;
                width: 72px;
                overflow: hidden;
                white-space: nowrap;
                height: @divHeight;
                margin-left: 15px;

                span.collaps,
                span.add {
                    color: #333333;
                    font-size: 11px;
                    line-height: @divHeight;
                    cursor: pointer;
                    margin-top: 10px;
                    text-align: center;
                }

                span.collaps {
                    background: no-repeat scroll right center transparent;

                    span {
                        display: inline;
                    }
                }

                span.add {
                    padding: 0px;
                    border-bottom: 1px dotted #333;
                    display: none;
                }
            }

            &:hover {
                background-color: #e5e5e5;

                .taskName a {
                    text-decoration: underline;
                }

                .subtasksCount span.add {
                    display: inline;
                }

                .user {
                    span {
                        border-bottom: 1px dotted #000000;

                        &.not-action {
                            border-bottom: 1px dotted transparent;
                            cursor: default;
                        }
                    }
                }
            }

            &.closed {
                &:hover .subtasksCount span.add,
                .subtasksCount span.collaps {
                    display: none;
                }

                .user,
                .user b {
                    color: #83888d;
                }

                &:hover .user span {
                    border-bottom-color: #83888d;
                }

                span.timeLeft {
                    color: #83888d;
                }
            }

            .user {
                white-space: nowrap;
                float: right;
                font-size: 12px;
                color: #333333;
                width: 160px;
                overflow: hidden;
                line-height: @divHeight;
                cursor: pointer;
                display: inline-block;
                margin-right: 15px;

                span b {
                    color: #666;
                }

                span:hover {
                    border-bottom: 1px dotted #000000;
                }

                span.not-action:hover {
                    border-bottom: 1px dotted transparent;
                    cursor: default;
                }
            }

            .others {
                display: none;
            }

            .entity-menu {
                float: right;
                line-height: @divHeight;
                margin: 10px 8px 0 0;
            }

            &:first-child {
                border-top: 1px solid #d1d1d1;
            }
        }

        .check .taskProcess {
            margin-left: 20px;
            margin-top: 2px;
        }

        .subtask .check .taskProcess {
            margin-left: 1px;
            margin-top: -3px;
        }
    }
}

#showNextTaskProcess {
    display:none;
}

.deadline_late {
    text-align: left;
}

#othersListPopup {
    .user,
    .user span {
        width: 170px;
    }
}

.studio-action-panel .dropdown-content .dropdown-item.user.not-action:hover,
.studio-action-panel .dropdown-content .dropdown-item.user.not-action:hover span {
    text-decoration: none;
    cursor: default;
}


#moveTaskPanel .milestonesList {
    overflow-x: hidden;
    overflow-y: auto;
    height: 200px;
    border-top: 1px solid #D1D1D1;

    .ms {
        border-bottom: 1px solid #D1D1D1;
        padding: 5px;
    }
}

.borderBase.ms {padding:20px 30px 30px 20px;margin-bottom:20px;}
.taskTitls.ms {
    padding: 4px 0px 12px 0px;
    overflow-x: hidden;
}
.describe-text.ms {padding-bottom:10px;}

.st_separater {
  width:100%;
  height:0px;
}
.filterSeparater {
  width:100%;
  height:10px;
}

*+html .tl-combobox .combobox-container {
    position: relative;
}
*+html .tl-combobox .combobox-wrapper {
    position: static;
}

.popupContainerClass .infoPanel {
    margin: 0px;
}
.popupActionPanel {
    background: #fff;
    border: 1px solid #8E908F;
    display: none;
    min-width: 140px;
    padding: 7px 10px;
    position: absolute;
    z-index: 1000;
}

#projectSelector_switcher span {
    max-width: 188px;
    display: inline-block;
    overflow: hidden;
}

#emptyFilterScreen, #emptyTaskListScreen {
    display: none;
}


/*---- status combobox ----*/

.taskList {
    .changeStatusCombobox {
        width: 38px;
        height: 22px;
        margin:8px 0 8px 8px;
        text-align: center;

        &.canEdit {
            border: 1px solid #d1d1d1;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            cursor: pointer;

            span.arrow {
                background-image: none;
                height: 7px;
                width: 7px;
                display: inline-block;
                position: relative;
                margin: 0 4px 4px 1px;
                *inline: inline;
                *zoom: 1;

                &:after {
                    display: block;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    border-top: 4px solid #B8B8B8;
                    content: "";
                    height: 0;
                    position: absolute;
                    right: -1px;
                    top: 50%;
                    margin-top: -2px;
                    width: 0;
                    text-align: center;
                }
            }
        }

        &.noEdit {
            background-image: none;
            background-color: transparent;
            border: 1px solid transparent;
            margin-left:0px;
        }

        span {
            display: inline-block;
            margin: 3px 0 0 2px;
            width: 16px;
            height: 16px;
            *inline: inline;
            *zoom: 1;
        }

        .open,
        .overdue,
        .closed {
            background: url('../../../../../skins/default/images/svg/projects/inbox.svg') no-repeat;
        }

        .closed {
            background: url('../../../../../skins/default/images/svg/projects/check_tick.svg') no-repeat;
            background-position-x: -2px;
        }
    }


        div.task:hover .changeStatusCombobox.canEdit,
        .changeStatusCombobox.canEdit.selected {
            background-color: #eaeaea;
            border-color: #a8a8a8;

            span.arrow:after {
                border-top-color: #999999;
            }
        }
}

#remindAboutTask .containerBodyBlock {
    text-align: center;
}


body.media-width-0-1650:not(.media-width-0-1500) #CommonListContainer .taskList .task .taskName {
    max-width: 660px;
}
body.media-width-0-1500:not(.media-width-0-1400) #CommonListContainer .taskList .task .taskName {
    max-width: 560px;
}
body.media-width-0-1400:not(.media-width-0-1300) #CommonListContainer .taskList .task .taskName {
    max-width: 460px;
}
body.media-width-0-1300:not(.media-width-0-1200) #CommonListContainer .taskList .task .taskName {
    max-width: 360px;
}
body.media-width-0-1200:not(.media-width-0-1100) #CommonListContainer .taskList .task .taskName {
    max-width: 260px;
}
body.media-width-0-1100 #CommonListContainer .taskList .task .taskName {
    max-width: 160px;
}

.taskProcess {
  background: url('../../../../../skins/default/images/loader_16.gif') no-repeat;
}

/*******************************************************************************
   Subtasks
*******************************************************************************/

.subtask {
    line-height: 30px;
    clear: both;

    &.with-entity-menu .entity-menu {
        float: right;
        margin: 4px 8px 0 14px;
    }

    .entity-menu.show,
    &.menuopen .entity-menu,
    &:hover .entity-menu.show {
        border-color: #3b72a7;

        &:after {
            border-top-color: #3b72a7;
        }
    }

    &:hover,
    &.menuopen {
        background: #f2f2f2;
    }

    &.last {
        border-bottom: none;
    }

    .check {
        float: left;
        width: 13px;
        height: 29px;

        input {
            margin-top: 5px;
            margin-left: 0px;
        }

        input, #ie#fix {
            margin-top: 8px;
        }
    }

    .taskName {
        float: left;
        width: 66.5%;
        margin-left: 10px;
        line-height: 29px;
        overflow: hidden;
        padding-bottom: 7px;

        span {
            display: block;
            margin-top: 7px;
            line-height: 16px;
        }
    }

    .user {
        white-space: nowrap;
        float: right;
        overflow: hidden;
        line-height: 29px;
        width: 160px;
        display: inline-block;

        b {
            color: #666;
        }
    }

    &.closed {
        .taskName {
            color: #83888d;
            text-decoration: line-through;
        }

        .user {
            color: #83888d;
            font-size: 12px;
        }
    }
}

.quickAddSubTaskLink {
    margin: 8px 0 6px 0;
    border: #fff 1px solid;    
}

.subtask-loader {
    margin-top: 10px;
    height:12px;
    width: 12px;
    background: url('../../../../../skins/default/images/loader_12.gif') no-repeat 0 0;
}

/*---subtasks---*/
.add-subtask-field-wrapper {
    position: relative;
    clear: both;
    background-color: #fff;
    clear: both;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;

    &.absolute {
        position: absolute;
        top: 2px;
    }

    td {
        padding: 4px 2px;
    }

    .subtask-loader {
        position: absolute;
        top: -2px;
        left: 7px;
    }

    .subtask-name {
        border-right: none;
        padding-left: 24px;
    }

    input.subtask-name-input,
    input.subtask-name-input:focus {
        border: none;
        outline: 0;
        width: 100%;
    }

    .subtask-responsible {
        width: 150px;
        border-left: none;
        white-space: nowrap;
        overflow: hidden;

        .subtask-responsible-selector {
            position: relative;
        }
    }

    .subtask-add-button {
        width: 40px;
        padding-left: 8px;
    }
}

.subtask-responsible .tl-combobox .combobox-container{
    max-width: 256px;
}

body.media-width-0-1200 .subtask-responsible-selector
{
    max-width: 136px;
    float: left;
}

.nomenupoint {
	width:16px;
	height:16px;
	float:right;
    margin-left:13px;	
}

.subtasks { 
  position: relative;
  margin:8px 0;
}

.taskList .subtasks { /*---for list tasks---*/
    display: none;
    margin-left: @actionListWidth;
}
*:first-child+html .subtask .check input {
    margin-top:5px;
}


body.media-width-0-1200 .subtask .taskName {
    width:60.5%;
}

.title-and-responsible-wrapper {
    padding: 2px;
}
.subtask-name-input, .subtask-name-input:focus {
    border-color: transparent;
    outline: none;
    width: 60%;
}

/*******************************************************************************
   TaskDescriptionView
*******************************************************************************/
#taskTitleContainer {
    margin-bottom: 4px;

    .headerTaskTitle {
        color: #111;
        font-size: 24px;
        float: left;
        line-height: 30px;
        max-width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.deadlineLate
{
	color: #CC3300;
}
.studio-action-panel .date  /*--fix color--*/
{
    color: #333;
}

/*------common info-----*/

.colorPriority
{
	height: 16px;
	width: 16px;
    background: url('../images/projects_entity_statuses.png') no-repeat 0 -115px;
    span{
        margin-left:18px;
    }
}

/*-------Comments & subtasks------*/

#commentContainer #commentsTitle{
	display: none !important;
}
#commentsListWrapper{
    margin-top: 15px
}

/*-----Related tasks-----*/

.linked-tasks-buttons {
    .baseLinkAction,
    .icon-link a {
        color: #333;
    }

        .baseLinkAction.disabled {
            color: #83888D;
            cursor: default;
        }

    .icon-link {
        margin-right: 24px;
    }
}

.task-links {
    margin-bottom: 8px;
    border-collapse: collapse;
    color: #333333;
    font-size: 12px;
    table-layout: fixed;
    width: 100%;

    .title {
        .task-name {
            color: #333;
            max-width: 98%;
            line-height: 14px;
            text-decoration: none;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .invalid-link .title .task-name {
        max-width: 87%;
        margin-top: 2px;
    }

    .linked-task td {
        border-top: 1px solid #D1D1D1;
        height: 32px;
        vertical-align: middle;
        padding: 0px 8px;
    }

    .start-date, .task-links .end-date,
    .duration, .task-links .link-type {
        width: 100px;
        text-align: center;
    }

    .actions {
        width: 24px;
    }

    .edit-link-container .link-type {
        width: 251px;
    }
}

.gray-text .title a {
    color: #83888D;
}
#relatedTasks {
    border-bottom: 1px solid #D1D1D1;

    .linked-task {
        &:hover {
            background-color: #F2F2F2;
        }

        &.invalid-link,
        &.invalid-link:hover {
            background-color: #F7E1D9;
        }
    }
}

.attantion {
    display: inline-block;
    line-height: 16px;
    width: 16px;
    margin: 2px 4px 0 0;
    background: url("../images/small-icons.png") no-repeat 0 -104px transparent;
}

/*---edit task link container --*/
#linkedTasksContainer {
    position:relative;
}
#editTable {
    background-color: #fff;

    &.border-top .linked-task td {
        border-top: 1px solid #D1D1D1;
    }

    &.border-bottom .linked-task td {
        border-bottom: 1px solid #D1D1D1;
    }

    .actions {
        width: @actionListWidth;
        text-align: right;
    }
}

#taskSelector,
#taskSelector option {
    width: 100%;
    max-width: 500px;
}
#linkTypeSelector, #linkTypeSelector option{
    width: 150px;
    max-width: 150px;
}
/*------*/


#subtaskContainer, #filesContainer, #commentContainer {
    margin-bottom: 20px;
    clear: both;
}
.tabContent { display: none;}

